<template>
<div>
	<div id="carFooter">
		
		<div class="leftCar item" @click='isMenuShow=true'><i class="iconfont icon-caidan"></i></div>
		<div class="centerCar item">
			<div class="ball-container">
		        <div v-for="ball in balls">
		          <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
		            <div class="ball" v-show="ball.show">
		              <div class="inner inner-hook"></div>
		            </div>
		          </transition>
		        </div>
		     </div>
			<i class="iconfont icon-cart2">
				<span v-show='this.carList.length>0'></span>
			</i>&nbsp;
			<span> ￥{{price}}</span>
		</div>
		<div class="rightCar item">
			<mt-button type="default" class='yellow'>确认</mt-button>
		</div>
	</div>
	<menuShow :isShow="isMenuShow" @isShowChange="onShowChange"></menuShow>
</div>
</template>

<script>
	import menuShow from '../common/menuShow';
  	export default {
  		data() {
  			return {
  				isMenuShow:false,
  				balls: [
		          {
		            show: false
		          },
		          {
		            show: false
		          },
		          {
		            show: false
		          },
		          {
		            show: false
		          },
		          {
		            show: false
		          }
		        ],
		        dropBalls: [],
		        carList:this.$store.state.carList
  			}
  		},
  		methods:{
  			onShowChange(val){
	            this.isMenuShow=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
	        },
	        drop(el) {
		        for (let i = 0; i < this.balls.length; i++) {
		          let ball = this.balls[i];
		          if (!ball.show) {
		            ball.show = true;
		            ball.el = el;
		            this.dropBalls.push(ball);
		            return;
		          }
		        }
		    },
		    beforeDrop(el) {
		        let count = this.balls.length;
		        while (count--) {
		          let ball = this.balls[count];
		          if (ball.show) {
		            let rect = ball.el.getBoundingClientRect();
		            let x = rect.left - window.innerWidth*0.23;
		            let y = -(window.innerHeight - rect.top - window.innerWidth*0.08);
		            el.style.display = '';
		            el.style.webkitTransform = `translate3d(0,${y}px,0)`;
		            el.style.transform = `translate3d(0,${y}px,0)`;
		            let inner = el.getElementsByClassName('inner-hook')[0];
		            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
		            inner.style.transform = `translate3d(${x}px,0,0)`;
		          }
		        }
		    },
		    dropping(el, done) {
		        /* eslint-disable no-unused-vars */
		        let rf = el.offsetHeight;
		        this.$nextTick(() => {
		          el.style.webkitTransform = 'translate3d(0,0,0)';
		          el.style.transform = 'translate3d(0,0,0)';
		          let inner = el.getElementsByClassName('inner-hook')[0];
		          inner.style.webkitTransform = 'translate3d(0,0,0)';
		          inner.style.transform = 'translate3d(0,0,0)';
		          el.addEventListener('transitionend', done);
		        });
		    },
		    afterDrop(el) {
		        let ball = this.dropBalls.shift();
		        if (ball) {
		          ball.show = false;
		          el.style.display = 'none';
		    	}
  			},
  		},
  		components: {
			menuShow
		},
		computed:{
			price(){
				var priceTotal=0;
		
				for (var i = this.carList.length - 1; i >= 0; i--) {
					priceTotal += Number(this.carList[i].count)*Number(this.carList[i].pluPrice);
				};
			
				return priceTotal
			}
		}
  	};
</script>

<style lang='less' scoped>
	.ball-container{
      .ball{
        position: fixed;
        left:2.6rem;
        bottom: 0.4rem;
        z-index: 200;
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
        .inner{
          width: 0.4rem;
          height: 0.4rem;
          border-radius: 50%;
          background: #cba162;
          transition: all 0.4s linear;
        }
      }
    }
	#carFooter{
		position: fixed;
		z-index: 1;
		bottom: 0;
    	right: 0;
    	left: 0;
		background: #333;
		width: 100%;
		opacity: .7;
		color: #fff;
		height: 1.24rem;
		display: flex;
		flex-flow:row;
		text-align: center;
		line-height: 1.24rem;
		.leftCar{
			background: rgba(255,255,255,0.2);
			flex-basis: 1.333333rem;
			.iconfont{font-size:0.45rem;color: #fff;}
		}
		.centerCar{
			width: 4.4rem;
			.iconfont{font-size:0.453333rem;color: #fff;position: relative;
				span{
					position: absolute;
					width: 0.25rem;
					height: 0.25rem;
					border-radius: 50%;
					line-height: 0.293333rem;
					font-size: 0.3rem;
					top: -0.05rem;
					left: 0.3rem;
					background: red;
				}
			}
			span{font-size: 0.453333rem;font-family: 'PingFangSC-Regular, sans-serif';}
		}
		.rightCar{
			width: 4.266667rem;
			flex:1;
		}
		.yellow{
			background: #cba162;
			width: 100%;
			height: 1.24rem;
			color: #fff;
			display: block;
			border-radius: 0;
			font-size: 0.466667rem;
		}
	}
</style>
